<template>
	<div>
		<el-tree :props="data.props" :data="value" show-checkbox  ref="tree"
			node-key="id" @check-change="change" />		
	</div>
</template>

<script>
	import {
		reactive,
		toRef,
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		getMenus
	} from '/@/api/system.js'
	export default {
		name: 'systemRole',
		props:{
			value:{
				type:Object,
				default:()=>{
					return {}
				}
			},
			params:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		setup(props,ctx) {
			const data = reactive({
				props: {
					label: 'title',
					children: 'children',
				},
				
			})
			onMounted(() => {
				// getMenus().then(res => {
				// 	data.data = res.data					
				// })
				setCurrentIds(props.params)
			})
			
			const getCurrentIds = () => {
				
				let ids = tree.value.getHalfCheckedKeys()
				let ids1 = tree.value.getCheckedKeys(false);
				ids = ids.concat(ids1)
				return ids	
			}
			const setCurrentIds = (value)=>{
				value.forEach(item=>{
					tree.value.setChecked(item,true,false) 
				})
			}
			
			
			const change = (value1,value2)=>{
				const ids =  getCurrentIds()
				ctx.emit("update:params",ids)
			}
			
			const tree = ref(null)
			return {
				data,
				tree,
				change
			}
		}
	}
</script>

<style>
</style>
